@import './variables';

/*

q-[p|m][t|r|b|l|a|x|y]-[none|xs|sm|md|lg|xl]
T       D                   S

T - type
- values: p (padding), m (margin)

D - direction
- values:
  t (top), r (right), b (bottom), l (left),
  (all), x (both left & right), y (both top & bottom)

*/

$direction: (top:t, right:r, bottom:b, left:l);
/*内外边距 begin*/
$span: -1, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 30, 36, 40, 50, 60;
@each $i in $span {

  @each $k, $v in $direction {
    .m#{$v}#{$i}, .m#{$i}
    #{if($k==top,',.my' + $i,'')}
    #{if($k==bottom,',.my' + $i, '')}
    #{if($k==left,',.mx' + $i, '')}
    #{if($k==right,',.mx' + $i, '')} {
      margin-#{$k}: $i*1px;
    }

    .p#{$v}#{$i}, .p#{$i}
    #{if($k==top,',.py' + $i,'')}
    #{if($k==bottom,',.py' + $i, '')}
    #{if($k==left,',.px' + $i, '')}
    #{if($k==right,',.px' + $i, '')} {
      padding-#{$k}: $i*1px;
    }
  }
}

/*内外边距 end*/

/* 填充宽高 begin*/

.fitw {
  width: 100%;
}

.fith {
  height: 100%;
}

.fit {
  @extend .fitw, .fith;
}

/* 填充宽高 end*/

/*
 旋转,反转
*/

.rotate-45 {
  transform: rotate(45deg);
}

/*边框border begin*/
@each $k, $v in $direction {
  .bd#{$v}-no, .bd-no {
    border-#{$k}: none;
  }
  .bd#{$v}, .bd, ._bd, ._bd#{$v} {
    border-#{$k}-width: 1px;
    border-#{$k}-style: solid;
  }
  .bd#{$v}, .bd {
    border-#{$k}-color: #dcdcdc;
  }
}

.list-border > li {
  @extend .bdr;
  &:last-of-type {
    @extend .bdr-no;
  }
}

.ul-bdl .li {
  @extend .bdl;
  &:first-child {
    border: none;
  }
}

.ul-bdt .li {
  @extend .bdt;
  &:first-child {
    border: none;
  }
}
.ul-bd .li{
  @extend .bdl, .bdt;
  &:first-child {
    border: none;
  }
}
/*字体大小 begin*/
$font-size: 10 11 12 13 14 15 16 17 18 20 22 24 28 32 42 46 64 100 120;
@each $i in $font-size {
  .f#{$i} {
    font-size: $i * 1px;
  }
}

.fbold {
  font-weight: bold;
}

/*字体大小 end*/

/* height begin*/
$line-height: 20 22 26 28;
@each $h in $line-height {
  .h#{$h} {
    height: $h * 1px;
  }
  .line#{$h} {
    line-height: $h * 1px;
  }
}

$fixation-height: 30 32 36 38 40 44 50 54 60;
@each $h in $fixation-height {
  .h#{$h} {
    height: $h * 1px;
    line-height: $h * 1px;
  }
}
.h70 {
  height: 70px;
}
/* height end*/

/* 圆弧角 begin*/
.arc {
  border-radius: 10000px;
}

/* 圆弧角 end */
/* 圆角 begin*/
.corner {
  border-radius: $circular;
}

/* 圆角 end*/
/* position begin*/
.postl {
  top: 0;
  left: 0;
}

.postr {
  top: 0;
  right: 0;
}

.posbl {
  bottom: 0;
  left: 0;
}

posbr {
  bottom: 0;
  right: 0;
}

.posc {
  @extend .abs;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fix {
  position: fixed;
}
.fixfit {
  @extend .fix;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rel {
  position: relative;
}

.abs {
  position: absolute;
}

.absfit {
  @extend .abs;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* position end*/

/* 内容溢出元素框时，超出的部分隐藏 begin*/
.ofax {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

.ofay {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

.ofa {
  @extend .ofax, .ofay;
}

.ofx {
  overflow-x: hidden;
}

.ofy {
  overflow-y: hidden;
}

.of {
  @extend .ofx, .ofy;
}

/* 内容溢出元素框时，超出的部分隐藏 end*/

/* 文本超出省略 begin*/
.nowrap {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  &-multi {
    -webkit-line-clamp: 2;
  }
}

/* 文本超出省略 end*/

/* float begin*/
.fl {
  float: left;
}

.fr {
  float: right;
}

.tl {
  text-align: left;
}

.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

/* float end*/

.equal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

.equal-bg {
  @extend .equal;
  width: 1.6em;
  height: 1.6em;
}

/* icon size begin  32 48 64 80 96 112 128*/
$i: 2;
@for $ii from 0 through 6 {
  $i: $i + 2;
  $size: $i * 8;
  .sz#{$size} {
    width: $size * 1px;
    height: $size * 1px;
  }
}

/* icon size end*/

/* tap begin*/
.tap {
  @extend .rel;
  &:after {
    @extend .absfit;
    display: inline-block;
    content: '';
    transition: all .2s;
    pointer-events: none;
  }
  &:active:after {
    background-color: rgba(0, 0, 0, 0.125)
  }
  &.big:active:after {
    transform: scale(1.2);
  }
  &.fat:active:after {
    transform: scaleX(1.2);
  }
}

/* tap end*/

.disabled {
  opacity: .3;
  pointer-events: none;
}
